<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="Shortcut Icon" href="../images/aecc.ico" type="image/x-icon" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../StaticFiles/element-ui/element-ui.css">
  <link rel="stylesheet" href="../StaticFiles/nprogress/nprogress.min.css">
  <link rel="stylesheet" href="../styles/vue-page-common.css">
  <script src="../Scripts/vue.min.js"></script>
  <script src="../StaticFiles/element-ui/element-ui.js"></script>
  <script src="../Scripts/axios.min.js"></script>
  <script src="../StaticFiles/nprogress/nprogress.min.js"></script>
  <script src="../Scripts/dayjs.min.js"></script>
  <script src="../Scripts/axios.config.js"></script>
  <script src="../Scripts/crypto-js.js"></script>
  <script src="../Scripts/secret.js"></script>
  <script src="../Scripts/xlsx.full.min.js"></script>
  <title>热表专项计划看板</title>
  <style>
    .chart {
      height: 277px;
      border: 1px solid #409EFF;
      margin: 10px;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak v-on:keyup.enter="getData">
    <el-row class="header">
      <el-col :span="6"><img src="../images/aeec_logo.png" height="60" alt="黎阳LOGO" /></el-col>
      <el-col :span="12" class="header-title">热表专项计划看板</el-col>
      <el-col :span="6" class="currentTime">{{currentTime}}</el-col>
    </el-row>

    <!-- 左侧 -->
    <el-col :span="19" style="padding:10px;">
      <!-- 查询条件区 -->
      <el-form :inline="true" :model="queryInfo" ref="queryInfoRef" :disabled="formDisable">
        <el-form-item label="项目来源:">
          <el-select v-model="queryInfo.itemresource" placeholder="请选择" clearable filterable style="width: 160px;">
            <el-option v-for="item in itemresourceList" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="项目内容:">
          <el-input v-model.trim="queryInfo.itemcontent" placeholder="请输入" clearable></el-input>
        </el-form-item>

        <el-form-item label="措施:">
          <el-input v-model.trim="queryInfo.itemfinishprogress" placeholder="请输入" clearable></el-input>
        </el-form-item>

        <el-form-item label="责任单位:">
          <el-cascader :options="orginazition" :props="{ checkStrictly: true}" ref="orginazitionRef"
            v-model="queryInfo.responseteam" clearable style="width:340px;">
          </el-cascader>
        </el-form-item>

        <el-form-item label="责任人:">
          <el-select v-model="queryInfo.responseemployee" placeholder="请选择" filterable clearable style="width: 120px;">
            <el-option v-for="f in userList" :key="f.employeeid" :label="f.fullname" :value="f.fullname">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="要求完成时间:">
          <el-date-picker v-model="queryInfo.needfinishdate" type="daterange" range-separator="至"
            value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="实际完成时间:">
          <el-date-picker v-model="queryInfo.finishdate" type="daterange" range-separator="至" value-format="yyyy-MM-dd"
            start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>

        <el-form-item label="状态:">
          <el-select v-model="queryInfo.status" placeholder="请选择" clearable filterable style="width: 120px;">
            <el-option :key="'未完成'" :label="'未完成'" :value="'未完成'"></el-option>
            <el-option :key="'超期完成'" :label="'超期完成'" :value="'超期完成'"></el-option>
            <el-option :key="'按时完成'" :label="'按时完成'" :value="'按时完成'"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="单元格合并显示:">
          <el-switch v-model="mergeCell" inactive-text="" active-text=""></el-switch>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="getData">查询</el-button>
          </el-button>
          <el-button type="primary" icon="el-icon-download" size="small" @click="getExportExcel">导出</el-button>
          <el-button type="success" icon="el-icon-circle-plus-outline" size="small" @click="addBtnClick">新增</el-button>
          </el-button>
          <el-button type="warning" icon="el-icon-upload2" size="small" @click="importBtnClick">导入
          </el-button>
        </el-form-item>
      </el-form>

      <!-- 表格显示区 -->
      <el-table v-loading="loading" v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
        element-loading-background="rgba(0,0,0,0.7)" :data="dataList" stripe border :span-method="handleSpanMethod">
        <el-table-column type="index" width="40"></el-table-column>
        <el-table-column label="操作" width="130">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showUpdateDialog(scope.row)">
            </el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteItem(scope.row.id)">
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="id" prop="id" width="80" v-if="false" show-overflow-tooltip></el-table-column>
        <el-table-column label="项目来源" prop="itemresource" width="200" show-overflow-tooltip></el-table-column>
        <el-table-column label="项目内容" prop="itemcontent" width="300" show-overflow-tooltip></el-table-column>
        <el-table-column label="措施" prop="itemfinishprogress" show-overflow-tooltip></el-table-column>
        <el-table-column label="要求完成时间" prop="needfinishdate" width="100" :formatter="splitDate"></el-table-column>
        <el-table-column label="实际完成时间" prop="finishdate" width="100" :formatter="splitDate"></el-table-column>
        <el-table-column label="完成进度" prop="schedule" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.schedule !== null">{{scope.row.schedule}}%</span>
          </template>
        </el-table-column>
        <el-table-column label="责任单位" prop="responseteam" width="140" show-overflow-tooltip></el-table-column>
        <el-table-column label="责任人" prop="responseemployee" width="100" show-overflow-tooltip></el-table-column>
        <el-table-column label="状态" prop="status" width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === '超期完成'" type="warning">超期完成</el-tag>
            <el-tag v-else-if="scope.row.status === '按时完成'" type="success">按时完成</el-tag>
            <el-tag v-else type="danger">未完成</el-tag>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.currentPage" :page-sizes="[12,50,100]" :page-size="queryInfo.pageSize"
        layout="prev,pager,next,jumper,sizes,total" :total="total">
      </el-pagination>

      <!-- 回到顶部 -->
      <el-backtop></el-backtop>
    </el-col>

    <!-- 右侧 -->
    <el-col :span="5">
      <div id="month" class="chart"></div>
      <div id="week" class="chart"></div>
      <div id="today" class="chart"></div>
    </el-col>

    <!-- 新增 对话框 -->
    <el-dialog title="新增专项计划" :visible.sync="addDialogVisible" width="50%" @close="addDialogClose">
      <el-form :model="addForm" ref="addFormRef" :inline="true" :label-position="'top'" lable-width="100px"
        :rules="rules" status-icon>
        <el-form-item label="项目来源:" prop="itemresource">
          <el-select v-model="addForm.itemresource" placeholder="请选择" clearable filterable>
            <el-option v-for="item in itemresourceList" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="项目内容:" prop="itemcontent">
          <el-input v-model.trim="addForm.itemcontent" placeholder="请输入" clearable style="width: 455px;"></el-input>
        </el-form-item>

        <div>
          <el-form-item label="措施:" prop="itemfinishprogress">
            <el-input v-model.trim="addForm.itemfinishprogress" type="textarea" :rows="3" style="width:690px;"
              placeholder="请输入内容">
            </el-input>
          </el-form-item>
        </div>

        <el-form-item label="责任单位:" prop="responseteam">
          <el-cascader :options="orginazition" :props="{ checkStrictly: true}" v-model="addForm.responseteam" clearable
            style="width:340px;">
          </el-cascader>
        </el-form-item>

        <el-form-item label="责任人:" prop="responseemployee">
          <el-select v-model="addForm.responseemployee" placeholder="请选择责任人" filterable clearable>
            <el-option v-for="f in userList" :key="f.employeeid" :label="f.fullname" :value="f.fullname">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="要求完成时间:" prop="needfinishdate">
          <el-date-picker v-model="addForm.needfinishdate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="实际完成时间:">
          <el-date-picker v-model="addForm.finishdate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="完成进度:" prop="schedule">
          <el-select v-model="addForm.schedule" placeholder="请选择" clearable>
            <el-option v-for="item in scheduleList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <!-- 弹出窗底下按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="addItem" size="small">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 更新 对话框 -->
    <el-dialog title="更新专项计划" :visible.sync="updateDialogVisible" width="50%" @close="updateDialogClose">
      <el-form :model="updateForm" ref="updateFormRef" :inline="true" :label-position="'top'" lable-width="100px"
        :rules="rules" status-icon>
        <el-form-item label="项目来源:" prop="itemresource">
          <el-select v-model="updateForm.itemresource" placeholder="请选择" clearable filterable>
            <el-option v-for="item in itemresourceList" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="项目内容:" prop="itemcontent">
          <el-input v-model.trim="updateForm.itemcontent" placeholder="请输入" clearable style="width: 455px;"></el-input>
        </el-form-item>

        <div>
          <el-form-item label="措施:" prop="itemfinishprogress">
            <el-input v-model.trim="updateForm.itemfinishprogress" type="textarea" :rows="3" style="width:690px;"
              placeholder="请输入内容">
            </el-input>
          </el-form-item>
        </div>

        <el-form-item label="责任单位:" prop="responseteam">
          <el-cascader :options="orginazition" :props="{ checkStrictly: true}" v-model="updateForm.responseteam"
            clearable style="width:340px;">
          </el-cascader>
        </el-form-item>

        <el-form-item label="责任人:" prop="responseemployee">
          <el-select v-model="updateForm.responseemployee" placeholder="请选择责任人" filterable clearable>
            <el-option v-for="f in userList" :key="f.employeeid" :label="f.fullname" :value="f.fullname">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="要求完成时间:" prop="needfinishdate">
          <el-date-picker v-model="updateForm.needfinishdate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="实际完成时间:">
          <el-date-picker v-model="updateForm.finishdate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="完成进度:" prop="schedule">
          <el-select v-model="updateForm.schedule" placeholder="请选择" clearable>
            <el-option v-for="item in scheduleList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <!-- 弹出窗底下按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="updateDialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="updateItem" size="small">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 热表专项计划导入 -->
    <el-dialog title="热表专项计划导入" :visible.sync="itemImport.dialogVisible" width="90%" :top="'20px'"
      @close="itemImport.dataList = []">
      <el-form :inline="true" ref="itemImportRef">
        <el-form-item>
          <el-upload action="" :before-upload="itemImportBeforeUpload" :multiple="true" accept=".xls,.xlsx">
            <el-button slot="trigger" type="primary" size="small" icon="el-icon-upload">选择文件</el-button>
            <el-button type="success" size="small" icon="el-icon-success" @click="saveItemImportData">保存</el-button>
            <span style="color:red;font-weight:bold;margin-left: 10px;">内部系统，严禁上传涉密信息</span>
          </el-upload>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table :data="itemImport.dataList" stripe border ref="itemImportData" v-loading="loading"
        v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
        element-loading-background="rgba(0,0,0,0.8)" height="640">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column label="操作" width="130">
          <template slot-scope="scope">
            <el-button size="mini" icon="el-icon-edit" type="primary" @click="handleEdit(scope.$index, scope.row)">
            </el-button>
            <el-button size="mini" icon="el-icon-delete" type="danger" @click="handleDelete(scope.$index, scope.row)">
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="校验结果" prop="islegel" width="100">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.islegel === 1" type="success">校验成功</el-tag>
            <el-tag v-else type="danger">校验失败</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="校验失败原因" prop="illegalreason" width="300">
          <template slot-scope="scope">
            <span style="color:red;font-weight:bold;" v-if="scope.row.islegel === 0">
              <i class="el-icon-warning"></i>
              {{scope.row.illegalreason}}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="唯一id" prop="id" v-if="false"></el-table-column>
        <el-table-column label="项目来源" prop="itemresource"></el-table-column>
        <el-table-column label="项目内容" prop="itemcontent"></el-table-column>
        <el-table-column label="责任单位" prop="responseteam"></el-table-column>
        <el-table-column label="责任人" prop="responseemployee" width="100"></el-table-column>
        <el-table-column label="要求完成时间" prop="needfinishdate" width="120"></el-table-column>
        <el-table-column label="措施" prop="itemfinishprogress"></el-table-column>
        <el-table-column label="实际完成时间" prop="finishdate" width="120"></el-table-column>
        <el-table-column label="完成进度" prop="schedule" width="80"></el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="修改导入数据" :visible.sync="editDialogVisible" width="50%" @close="editDialogClose"
      :close-on-click-modal="true">
      <el-form :inline="true" :model="editForm" :rules="editFormRule" ref="editFormRef" :label-position="'top'"
        lable-width="100px">
        <el-form-item label="项目来源:" prop="itemresource">
          <el-select v-model="editForm.itemresource" placeholder="请选择" clearable filterable>
            <el-option v-for="item in itemresourceList" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="项目内容:" prop="itemcontent">
          <el-input v-model.trim="editForm.itemcontent" placeholder="请输入" clearable style="width: 455px;"></el-input>
        </el-form-item>

        <div>
          <el-form-item label="措施:" prop="itemfinishprogress">
            <el-input v-model.trim="editForm.itemfinishprogress" type="textarea" :rows="3" style="width:690px;"
              placeholder="请输入内容" clearable>
            </el-input>
          </el-form-item>
        </div>

        <el-form-item label="责任单位:" prop="responseteam">
          <el-cascader :options="orginazition" :props="{ checkStrictly: true}" v-model="editForm.responseteam" clearable
            style="width:340px;">
          </el-cascader>
        </el-form-item>

        <el-form-item label="责任人:" prop="responseemployee">
          <el-select v-model="editForm.responseemployee" placeholder="请选择责任人" filterable clearable>
            <el-option v-for="f in userList" :key="f.employeeid" :label="f.fullname" :value="f.fullname">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="要求完成时间:" prop="needfinishdate">
          <el-date-picker v-model="editForm.needfinishdate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="实际完成时间:">
          <el-date-picker v-model="editForm.finishdate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="完成进度:" prop="schedule">
          <el-select v-model="editForm.schedule" placeholder="请选择" clearable>
            <el-option v-for="item in scheduleList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <!-- 弹出窗底下按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="saveChangedRowData" size="small">确 定</el-button>
      </span>
    </el-dialog>

  </div>
  <script src="../Scripts/echarts/echarts-5.4.0.min.js"></script>
  <script type="module">
    import { getParams, exportExcelData, getUserWhiteList, generateUUID } from '../Scripts/hooks/useCommonMethod.js'
    import { pieOption } from '../Scripts/hooks/chartConfig.js';
    import { prevWeek, thisWeek, nextWeek, prevMonth, thisMonth, nextMonth } from '../Scripts/hooks/useDateShortCut.js'
    import { splitDate } from '../Scripts/hooks/format.js'
    import { getTeamList, getFactoryUsers, getMESOrginazition, getWorkcenterList } from '../Scripts/hooks/fetchAPI.js'
    import { getSpanArr } from '../Scripts/hooks/spanMethod.js'
    const app = new Vue({
      el: '#app',
      data: {
        splitDate,
        currentTime: '',
        total: 0,
        loading: false,
        loadingText: '数据加载中...',
        queryInfo: {
          itemresource: '',
          itemcontent: '',
          itemfinishprogress: '',
          responseteam: [],
          responseemployee: '',
          needfinishdate: '',
          finishdate: '',
          status: '',
          currentPage: 1,
          pageSize: 12
        },
        dataList: [],
        scheduleList: [
          { value: 0, label: '0%' },
          { value: 25, label: '25%' },
          { value: 50, label: '50%' },
          { value: 75, label: '75%' },
          { value: 100, label: '100%' }
        ],
        addDialogVisible: false,
        addForm: {
          itemresource: '',
          itemcontent: '',
          itemfinishprogress: '',
          responseteam: '',
          needfinishdate: '',
          finishdate: '',
          responseemployee: '',
          schedule: ''
        },
        updateDialogVisible: false,
        updateForm: {},
        formDisable: false,
        employeeid: '',
        whiteList: [],
        rules: {
          itemresource: [{ required: true, message: '项目来源不能为空', trigger: 'blur' }],
          itemcontent: [{ required: true, message: '项目内容不能为空', trigger: 'blur' }],
          itemfinishprogress: [{ required: true, message: '措施不能为空', trigger: 'blur' }],
          responseteam: [{ required: true, message: '责任单位不能为空', trigger: 'change' }],
          needfinishdate: [{ required: true, message: '要求完成时间不能为空', trigger: 'blur' }],
          responseemployee: [{ required: true, message: '责任人不能为空', trigger: 'change' }]
        },
        hasAuthorization: false,//用户是否有增、删、改权限
        loadingConfig: { text: '数据查询中...', effect: 'whirling', maskColor: 'transparent', textColor: '#fff', color: '#66b1ff' },
        pickerOptions: { shortcuts: [prevWeek, thisWeek, nextWeek, prevMonth, thisMonth, nextMonth] },
        teamList: [],
        // 是否默认单元格合并显示
        mergeCell: true,
        // 要进行单元格合并的列
        mergeColumns: [],
        mergeData: {},
        // 项目来源值列表
        itemresourceList: ['改善计划', '培训计划', '日清会任务', '会议纪要', '主计划风险', '科研攻关计划', '质量提升计划'],
        // excel模板表头
        excelTemplateHeader: {
          itemresource: '项目来源', itemcontent: '项目内容', itemfinishprogress: '措施',
          needfinishdate: '要求完成时间', finishdate: '实际完成时间', responseteam: '责任单位', responseemployee: '责任人', schedule: '完成进度'
        },
        // 导入
        itemImport: { dialogVisible: false, dataList: [] },
        editForm: { itemcontent: '', responseteam: '', responseemployee: '', needfinishdate: '', itemfinishprogress: '', finishdate: '', schedule: '', selectRowIndex: 0 },
        // 导入修改对话框
        editDialogVisible: false,
        // 导入修改表单规则
        editFormRule: {
          itemresource: [{ required: true, message: '项目来源不能为空', trigger: 'change' }],
          itemcontent: [{ required: true, message: '项目内容不能为空', trigger: 'change' }],
          needfinishdate: [{ required: true, message: '要求完成时间不能为空', trigger: 'change' }],
          responseteam: [{ required: true, message: '责任单位不能为空', trigger: 'change' }],
          responseemployee: [{ required: true, message: '责任人不能为空', trigger: 'change' }],
        },
        userList: [],
        orginazition: [],
        workcenterList: []
      },
      methods: {
        getPageAllData() {
          this.getData();
          this.getMonthData();
          this.getWeekData();
          this.getTodayData();
        },
        // 表格数据
        async getData() {
          const { responseteam } = this.queryInfo;
          const selectOrgName = this.getSelectOrgName(responseteam);
          this.loading = true;
          const { data: { data, meta, total } } = await axios.post('../handler/board/RbSpecialItemPlanDashBoard.ashx?action=getData', {
            type: 'getData',
            ...this.queryInfo,
            responseteam: selectOrgName
          })
          this.loading = false;
          if (meta.status === 500) {
            return this.$message.error(meta.msg);
          }
          this.dataList = data;
          this.total = total;
          if (data.length > 0) {
            this.mergeColumns = Object.keys(data[0]);
            for (const i of this.mergeColumns) {
              this.mergeData[i] = getSpanArr(data, i);
            }
          }
        },
        // 新增按钮点击
        addBtnClick() {
          if (!this.hasAuthorization) {
            return this.$message.error('该用户无操作权限!');
          }
          this.addDialogVisible = true;
        },
        // 添加
        async addItem() {
          this.$refs["addFormRef"].validate(async (valid) => {
            if (valid) {
              const { responseteam } = this.addForm;
              if (responseteam.length == 1) {
                return this.$message.error('责任单位不能选择分厂')
              }

              const { data: { data, meta, total } } = await axios.post('../handler/board/RbSpecialItemPlanDashBoard.ashx?action=addItem', {
                type: 'addItem',
                ...this.addForm,
                createemployee: this.employeeid,
                responseteam: this.getSelectOrgName(responseteam)
              });

              if (meta.status === 500) { return this.$message.error(meta.msg); }

              if (total > 0) {
                this.$message.success('新增成功!');
              } else {
                return this.$message.error('新增失败!')
              }
              this.addDialogVisible = false;
              this.getPageAllData();
            }
          })
        },
        // 添加对话框关闭后
        addDialogClose() {
          this.$refs["addFormRef"].resetFields();//清空表单
          Object.keys(this.addForm).forEach(key => { this.addForm[key] = '' });
        },
        // 更新对话框打开
        async showUpdateDialog(row) {
          if (!this.hasAuthorization) {
            return this.$message.error('该用户无操作权限!');
          }
          let { responseteam } = row;
          const factoryid = Decrypt(getParams("factoryid"));
          let selectOrg = [];
          if (responseteam) {
            if (this.workcenterList.some(i => i.workcentername === responseteam)) {
              const workcenterid = this.workcenterList.filter(i => i.workcentername === responseteam)[0].workcenterid;
              selectOrg = [factoryid, workcenterid];
            }
            if (this.teamList.some(i => i.teamname === responseteam)) {
              const { data: { data, meta, total } } = await axios.post('../handler/board/RbSpecialItemPlanDashBoard.ashx?action=getTeamInfo', {
                type: 'getTeamInfo',
                teamname: responseteam
              });
              const { factoryid, workcenterid, teamid } = data[0];
              selectOrg = [factoryid, workcenterid, teamid];
            }
          }
          this.updateForm = { ...row, responseteam: selectOrg };
          this.updateDialogVisible = true;
        },
        // 更新
        async updateItem() {
          this.$refs["updateFormRef"].validate(async (valid) => {
            if (valid) {
              const { responseteam } = this.updateForm;
              if (responseteam.length == 1) {
                return this.$message.error('责任单位不能选择分厂')
              }

              const { data: { data, meta, total } } = await axios.post('../handler/board/RbSpecialItemPlanDashBoard.ashx?action=updateItem', {
                type: 'updateItem',
                ...this.updateForm,
                lastchangeemployee: this.employeeid,
                responseteam: this.getSelectOrgName(responseteam)
              });

              if (meta.status === 500) {
                return this.$message.error(meta.msg)
              }

              if (total > 0) {
                this.$message.success('更新成功!');
              } else {
                return this.$message.error('更新失败!')
              }
              this.updateDialogVisible = false;
              this.getPageAllData();
            }
          })
        },
        // 更新对话框关闭后
        updateDialogClose() {
          this.$refs["updateFormRef"].resetFields();//清空表单
          Object.keys(this.updateForm).forEach(key => { this.updateForm[key] = '' });
        },
        // 删除
        async deleteItem(id) {
          if (!this.hasAuthorization) {
            return this.$message.error('该用户无操作权限!');
          }
          const confirmResult = await this.$confirm('将永久删除该项, 此操作无法撤销，请确认是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(err => err)

          // 如果用户点击了【确定】，则返回值为字符串 confirm ,如果用户取消删除，则返回值为字符串 cancel
          if (confirmResult !== 'confirm') {
            return this.$message.info('已取消删除!')
          }

          const { data: { data, meta, total } } = await axios.post('../handler/board/RbSpecialItemPlanDashBoard.ashx?action=deleteItem', { type: 'deleteItem', id });
          if (meta.status === 500) {
            return this.$message.error(meta.msg)
          }

          if (total > 0) {
            this.$message.success('删除成功!');
          } else {
            return this.$message.error('删除失败!')
          }
          this.getPageAllData();
        },
        // 页面饼图公共方法
        async getPieDataCommon(config) {
          let { chartid, title, action } = config;

          echarts.dispose(document.getElementById(chartid));
          let chart = echarts.init(document.getElementById(chartid));
          chart.showLoading(this.loadingConfig);

          const { data: { data, meta, total } } = await axios.post(`../handler/board/RbSpecialItemPlanDashBoard.ashx?action=${action}`, {
            type: action,
            ...this.queryInfo
          });

          chart.hideLoading();
          if (meta.status == 500) { return this.$message.error(meta.msg); }
          if (data.length === 0) { return; }

          echarts.dispose(document.getElementById(chartid));
          chart = echarts.init(document.getElementById(chartid));

          let { finished, notfinished } = data[0];
          let option = pieOption();
          option.title.text = title;
          option.series[0].name = title;
          option.series[0].data = [{ value: finished, name: '完成' }, { value: notfinished, name: '未完成' }];
          chart.setOption(option);
        },
        // 本月完成情况
        async getMonthData() {
          const config = { chartid: 'month', action: 'getMonthData', title: '月度完成情况' };
          this.getPieDataCommon(config);
        },
        // 本周
        async getWeekData() {
          const config = { chartid: 'week', action: 'getWeekData', title: '本周完成情况' };
          this.getPieDataCommon(config);
        },
        // 今日数据
        async getTodayData() {
          const config = { chartid: 'today', action: 'getTodayData', title: '今日完成情况' };
          this.getPieDataCommon(config);
        },
        handleCurrentChange(newPage) {
          this.queryInfo.currentPage = newPage;
          this.getData();
        },
        handleSizeChange(newSize) {
          this.queryInfo.pageSize = newSize;
          this.getData();
        },
        // 合并单元格方法
        handleSpanMethod({ row, column, rowIndex, columnIndex }) {
          if (!this.mergeCell) { return; }
          if (this.mergeColumns.includes(column.property)) {
            const _row = this.mergeData[column.property][rowIndex];
            const _col = _row > 0 ? 1 : 0;
            return { rowspan: _row, colspan: _col };
          }
        },
        // 导入按钮点击事件
        importBtnClick() {
          if (!this.hasAuthorization) {
            return this.$message.error('该用户无操作权限!');
          }
          this.itemImport.dialogVisible = true;
        },
        // 导入的excel数据加载前
        itemImportBeforeUpload(file) {
          let reader = new FileReader();
          reader.onload = e => {
            let data = new Uint8Array(e.target.result);
            let workbook = XLSX.read(data, { type: 'array' });
            let first_sheet_name = workbook.SheetNames[0];
            let worksheet = workbook.Sheets[first_sheet_name];
            let content = XLSX.utils.sheet_to_json(worksheet, { raw: false, defval: null });
            if (content.length === 0) {
              return this.$message.error('所导入的excel文件为空');
            }
            // 检验excel模板是否缺少列
            if (this.hasExcelMissingColumn(content[0])) { return; }
            let returnData = [];
            for (const i of content) {
              let item = {
                itemresource: i["项目来源"],
                itemcontent: i["项目内容"],
                itemfinishprogress: i["措施"],
                needfinishdate: dayjs(i["要求完成时间"]).isValid() ? dayjs(i["要求完成时间"]).format('YYYY-MM-DD') : i["要求完成时间"],
                finishdate: dayjs(i["实际完成时间"]).isValid() ? dayjs(i["实际完成时间"]).format('YYYY-MM-DD') : i["实际完成时间"],
                responseteam: i["责任单位"],
                responseemployee: i["责任人"],
                schedule: i["完成进度"],
                islegel: 1,//默认校验成功
                illegalreason: '',//默认失败原因为空
                id: generateUUID() //生成唯一id
              }
              returnData.push(item);
            }
            this.itemImport.dataList = this.validateEachRowData(returnData);
          };
          reader.readAsArrayBuffer(file);
          return false;
        },
        // 检验excel模板是否缺少列
        hasExcelMissingColumn(data) {
          return Object.values(this.excelTemplateHeader).some(i => {
            if (!(i in data)) {
              this.$message.error(`所导入的excel文件缺少【${i}】列`);
              return true;
            }
          })
        },
        // 校验所导入excel数据
        validateEachRowData(returnData) {
          for (const i of returnData) {
            // 校验项目来源
            if (!i.itemresource) {
              i.islegel = 0;
              i.illegalreason = '【项目来源】不能为空';
              continue;
            } else {
              if (!this.itemresourceList.includes(i.itemresource)) {
                i.islegel = 0;
                i.illegalreason = '【项目来源】不是有效的值';
                continue;
              }
            }

            // 校验项目内容
            if (!i.itemcontent) {
              i.islegel = 0;
              i.illegalreason = '【项目内容】不能为空';
              continue;
            }

            // 校验要求完成时间
            if (!i.needfinishdate) {
              i.islegel = 0;
              i.illegalreason = '【要求完成时间】不能为空';
              continue;
            } else {
              if (!dayjs(i.needfinishdate).isValid()) {
                i.islegel = 0;
                i.illegalreason = '【要求完成时间】不是有效的日期格式';
                continue;
              }
            }

            // 校验实际完成时间
            if (i.finishdate && !dayjs(i.finishdate).isValid()) {
              i.islegel = 0;
              i.illegalreason = '【实际完成时间】不是有效的日期格式';
              continue;
            }

            // 校验责任单位
            if (!i.responseteam) {
              i.islegel = 0;
              i.illegalreason = '【责任单位】不能为空';
              continue;
            } else {
              if (!this.teamList.some(m => m.teamname === i.responseteam) && !this.workcenterList.some(m => m.workcentername === i.responseteam)) {
                i.islegel = 0;
                i.illegalreason = `责任单位:【${i.responseteam}】在系统中不存在`;
                continue;
              }
            }

            // 校验责任人
            if (!i.responseemployee) {
              i.islegel = 0;
              i.illegalreason = '【责任人】不能为空';
              continue;
            } else {
              if (!this.userList.some(m => m.fullname === i.responseemployee)) {
                i.islegel = 0;
                i.illegalreason = `责任人:【${i.responseemployee}】在系统中不存在`;
                continue;
              }
            }

            if (i.schedule) {
              if (!this.scheduleList.some(m => m.label === i.schedule)) {
                i.islegel = 0;
                i.illegalreason = `完成进度只能是：0%、25%、50%、75%、100%中的某一项`;
                continue;
              }
            }

          }
          return returnData;
        },
        // 移除所选行
        async handleDelete(index, row) {
          const confirmResult = await this.$confirm('删除该行数据?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(err => err)
          if (confirmResult !== 'confirm') {
            return this.$message.info('已取消删除!');
          }
          this.itemImport.dataList.splice(index, 1);
        },
        // 修改所选数据
        async handleEdit(index, row) {
          this.editDialogVisible = true;
          const { itemresource, responseteam, responseemployee } = row;
          const factoryid = Decrypt(getParams("factoryid"));
          let selectOrg = [];
          if (responseteam) {
            if (this.workcenterList.some(i => i.workcentername === responseteam)) {
              const workcenterid = this.workcenterList.filter(i => i.workcentername === responseteam)[0].workcenterid;
              selectOrg = [factoryid, workcenterid];
            }
            if (this.teamList.some(i => i.teamname === responseteam)) {
              const { data: { data, meta, total } } = await axios.post('../handler/board/RbSpecialItemPlanDashBoard.ashx?action=getTeamInfo', {
                type: 'getTeamInfo',
                teamname: responseteam
              });
              if (data.length > 0) {
                const { factoryid, workcenterid, teamid } = data[0];
                selectOrg = [factoryid, workcenterid, teamid];
              }
            }
          }

          this.editForm = {
            ...row,
            itemresource: this.itemresourceList.includes(itemresource) ? itemresource : '',//项目来源不存在时，在修改表单中置空
            // responseteam: this.teamList.some(m => m.teamname === responseteam) ? responseteam : '',//责任单位不存在时，在修改表单中置空
            responseteam: selectOrg,
            schedule: this.scheduleList.some(i => i.label === row.schedule) ? this.scheduleList.filter(i => i.label === row.schedule)[0].value : null,
            responseemployee: this.userList.some(m => m.fullname === responseemployee) ? responseemployee : '',//责任人不存在时，在修改表单中置空
          };
          this.editForm.selectRowIndex = index;
        },
        // 保存被修改的行数据
        saveChangedRowData(row) {
          this.$refs["editFormRef"].validate(async (valid) => {
            if (!valid) {
              this.$message.error('必填项不能为空');
            } else {
              const { responseteam, schedule } = this.editForm;
              if (responseteam.length == 1) {
                return this.$message.error('责任单位不能选择分厂')
              }

              let selectOrgName = this.getSelectOrgName(responseteam);
              this.$message.success('修改成功');
              const index = this.editForm.selectRowIndex;
              this.$set(this.itemImport.dataList, index,
                {
                  ...this.editForm,
                  responseteam: selectOrgName,
                  islegel: 1,
                  illegalreason: '',
                  schedule: this.scheduleList.some(i => i.value === schedule) ? this.scheduleList.filter(i => i.value === schedule)[0].label : ''
                });
              this.editDialogVisible = false;
            }
          })
        },
        // 修改对话框关闭后
        editDialogClose() {
          this.$refs["editFormRef"].resetFields();
        },
        // 保存导入
        async saveItemImportData() {
          const selection = this.$refs.itemImportData.selection;
          if (selection.length === 0) {
            return this.$message.error('请选择待保存的数据');
          }
          if (selection.some(i => i.islegel === 0)) {
            return this.$message.error('所选数据中存在校验失败的行！');
          }

          const confirmResult = await this.$confirm('确认要保存导入吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(err => err)
          if (confirmResult !== 'confirm') {
            return this.$message.info('已取消保存!');
          }
          this.loading = true;
          this.loadingText = '数据保存中...';
          const { data: { data, meta, total } } = await axios({
            method: 'POST',
            url: '../handler/board/RbSpecialItemPlanDashBoard.ashx?action=saveImportData',
            data: { type: 'saveImportData', willBeSavedData: selection, employeeid: getParams("uid") }
          })
          this.loading = false;
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          this.$message.success('保存成功');
          this.itemImport.dataList = [];
          this.getData();
        },
        // 导出
        async getExportExcel() {
          const { responseteam } = this.queryInfo;
          const selectOrgName = this.getSelectOrgName(responseteam);
          const config = {
            url: '../handler/board/RbSpecialItemPlanDashBoard.ashx?action=exportExcel',
            data: { type: 'exportExcel', ...this.queryInfo, responseteam: selectOrgName }
          }
          exportExcelData(config, this);
        },
        getSelectOrgName(responseteam) {
          if (!Array.isArray(responseteam)) {
            selectOrgName = '';
          }
          let selectOrgName = '';
          if (responseteam.length == 1) {
            return '';
          }
          if (responseteam.length === 2) {
            const workcenterid = responseteam[1];
            selectOrgName = this.workcenterList.filter(i => i.workcenterid === workcenterid)[0].workcentername;
          }

          if (responseteam.length === 3) {
            const teamid = responseteam[2];
            selectOrgName = this.teamList.filter(i => i.teamid === teamid)[0].teamname;
          }
          return selectOrgName;
        },
      },
      async created() {
        let incrementNumber = () => {
          setTimeout(incrementNumber, 500);
          this.currentTime = dayjs().format('YYYY年MM月DD日  HH:mm:ss');
        }
        setTimeout(incrementNumber, 500);
        const startOfMonth = dayjs().startOf('month').format('YYYY-MM-DD');
        const endOfMonth = dayjs().endOf('month').format('YYYY-MM-DD');
        const startOfWeek = dayjs().startOf('week').add(1, 'day').format('YYYY-MM-DD');
        const endOfWeek = dayjs().endOf('week').add(1, 'day').format('YYYY-MM-DD');
        this.queryInfo.today = dayjs().format('YYYY-MM-DD');
        this.queryInfo.thismonth = [startOfMonth, endOfMonth];
        this.queryInfo.thisweek = [startOfWeek, endOfWeek];

        if (!getParams('uid')) {
          this.formDisable = true;
          return this.$notify.error({ title: '错误', message: '缺少用户信息!', duration: 0 });
        }

        this.employeeid = getParams("uid");

        const [teamList, userList, orginazition, workcenterList] = await Promise.all([
          getTeamList({ factoryid: Decrypt(getParams("factoryid")) }),
          getFactoryUsers({ factoryid: Decrypt(getParams("factoryid")) }),
          getMESOrginazition({ isMapping: '是', factoryCode: '602', wctype: '是' }),
          getWorkcenterList({ factoryid: Decrypt(getParams("factoryid")) })
        ]);

        this.teamList = teamList;
        this.userList = userList;
        this.orginazition = orginazition;
        this.workcenterList = workcenterList;

        // 获取用户权限白名单
        const pageurl = window.location.pathname.split('/')[3];
        this.whiteList = await getUserWhiteList(pageurl, this.$message);

        if (this.whiteList.indexOf(this.employeeid) > -1) {
          this.hasAuthorization = true;
        }
        this.getPageAllData();
      },
      watch: {
        queryInfo: { handler() { this.queryInfo.currentPage = 1 }, deep: true }
      }
    })
  </script>
</body>

</html>